<template>
  <div class="function-manage">
    <Form
      ref="newFunctionForm"
      :model="newFunctionForm"
      :rules="rules"
      label-position="right"
      :label-width="100"
    >
      <div>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24">
            <Form-item prop="functionCode" :label="$t('module.function.code')">
              <Input
                v-model.trim="newFunctionForm.functionCode"
                :placeholder="$t('module.function.warning.enterFunctionCode')"
                disabled
              ></Input>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24">
            <Form-item prop="functionLangs" :label="$t('module.function.name')">
              <langInput v-model="newFunctionForm.functionLangs"></langInput>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24">
            <Form-item prop="functionDesc" :label="$t('module.function.description')">
              <Input
                v-model="newFunctionForm.functionDesc"
                :placeholder="$t('module.function.warning.enterFunctionDesc')"
              ></Input>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24">
            <Form-item prop="enabled" :label="$t('module.function.status')">
              <Select v-model="newFunctionForm.enabled" class="no-borderColor">
                <Option
                  v-for="item in enabledForm"
                  :value="item.id"
                  :key="item.id"
                >{{ item.enabled }}</Option>
              </Select>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24">
            <Form-item prop="iconCls" :label="$t('module.function.iconCls')">
              <Input
                v-model="newFunctionForm.iconCls"
                :placeholder="$t('module.function.warning.enterIcon')"
                :maxlength="40"
              ></Input>
              <Icon :type="newFunctionForm.iconCls" class="icon-size icon-margin-right"></Icon>
              <span v-if="newFunctionForm.iconCls">{{ newFunctionForm.functionName }}</span>
              <Icon type="md-log-out" class="icon-select" @click.native="iconEdit"></Icon>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24">
            <Form-item prop="parentFunctionName" :label="$t('module.function.parentNode')">
              <Input v-model="newFunctionForm.parentFunctionName" placeholder disabled></Input>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24">
            <Form-item prop="functionType" :label="$t('module.function.type')">
              <Select v-model="newFunctionForm.functionType" clearable disabled>
                <Option value="1">{{ $t("module.function.categoryType") }}</Option>
                <Option value="0">{{ $t("module.function.functionType") }}</Option>
              </Select>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24">
            <Form-item prop="applicationId" :label="$t('module.function.applicationId')">
              <Select v-model="newFunctionForm.applicationId" class="no-borderColor" disabled>
                <Option
                  v-for="itemKey in Object.keys(applicationList)"
                  :value="itemKey"
                  :key="itemKey"
                >
                  {{
                  applicationList[itemKey]
                  }}
                </Option>
              </Select>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="24">
            <Form-item prop="sort" :label="$t('module.function.sortNo')">
              <InputNumber
                :min="0"
                :max="9999"
                v-model="newFunctionForm.sort"
                placeholder
                style="width:100%"
              ></InputNumber>
            </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg" v-if="newFunctionForm.functionType != 1">
          <Col span="24">
            <Form-item prop="actionUrl" :label="$t('module.function.frontModule')">
              <Input
                v-model="newFunctionForm.actionUrl"
                :placeholder="$t('module.function.warning.url')"
              ></Input>
            </Form-item>
          </Col>
        </Row>
      </div>
    </Form>
  </div>
</template>

<script>
import Three from "@/tools/getThree.js";
import FunctionEdit from "./FunctionEdit.vue";
import IconEdit from "./IconEdit.vue";
import { searchAppList } from "@/api/applicationApi.js";
import functionAPI from "@/api/functionAPI.js";
import { CoreModuleName } from "@/const.js";
import locales from "./locales.js";
import { codeReg } from "@/const.js";

export default {
  props: {
    functionForm: {
      type: Object,
      default() {
        return {};
      }
    },
    applicationList: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  mixins: [locales],
  data() {
    const validateFunctionCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("module.function.warning.enterFunctionCode")));
      } else if (value.length > 30) {
        callback(new Error(this.$t("common.warning.codeCheckLength")));
      } else if (!new RegExp(codeReg).test(value)) {
        callback(new Error(this.$t("common.warning.codeCheckCharacter")));
      } else if (new RegExp("[\u4e00-\u9fa5]").test(value)) {
        callback(new Error(this.$t("common.warning.codeCheckCharacter")));
      }
      callback();
    };
    const validateFunctionName = (rule, value, callback) => {
      let flag = value.filter(item => {
        if (item.value == "") {
          return true;
        }
      });
      if (flag.length > 0 || value.length == 0) {
        callback(new Error(this.$t("module.function.warning.enterFunctionName")));
      } else {
        callback();
      }
    };
    const validateFunctionDesc = (rule, value, callback) => {
      if (value != null && value != value.trim() && value.trim() === "") {
        callback(new Error(this.$t("module.function.warning.enterFunctionDescription")));
      }
      if (value != null && value.length > 200) {
        callback(new Error(this.$t("module.function.warning.functionDescriptionMoreThan200Charts")));
      }
      callback();
    };
    const validateFunctionIcon = (rule, value, callback) => {
      if (value != null && value != value.trim() && value.trim() === "") {
        callback(new Error(this.$t("module.function.warning.enterFunctionIcon")));
      }
      callback();
    };
    const validateSort = (rule, value, callback) => {
      if (!new RegExp("^[0-9]d*$").test(value) && !value.replace(/(^\s*)|(\s*$)/g, "")) {
        callback(new Error(this.$t("module.function.warning.sortNoMustBeNum")));
      }
      callback();
    };
    // const validateUrl = (rule, value, callback) => {
    //   if(value.length > 4000) {
    //     callback(new Error(this.$t("module.function.warning.urlLength")));
    //   }
    //   if (!new RegExp("^[0-9]d*$").test(value) && !value.replace(/(^\s*)|(\s*$)/g, "")) {
    //     callback(new Error(this.$t("module.function.warning.url")));
    //   }
    //   callback();
    // };
    return {
      newFunctionForm: JSON.parse(JSON.stringify(this.functionForm)),
      rules: {
        functionCode: [{ validator: validateFunctionCode, trigger: "blur", required: true }],
        functionLangs: [{ validator: validateFunctionName, trigger: "change", required: true }],
        functionDesc: [{ validator: validateFunctionDesc, trigger: "blur" }],
        iconCls: [{ validator: validateFunctionIcon, trigger: "blur" }],
        actionUrl: [
          { trigger: "blur", message: this.$t("module.function.warning.enterActionUrl"), required: true },
          { max: 4000, message: this.$t("module.function.warning.urlLength"), trigger: 'blur' }
        ]
      },
      enabledForm: [
        { id: 0, enabled: "无效" },
        { id: 1, enabled: "有效" }
      ],
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => {
            this.save();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    };
  },
  created() {
    this.$emit("SetTitle", this.$t("module.function.editfunction"));
    this.$emit("SetPageWidth", 774);
    this.$emit("SetPageActions", this.actions);
  },

  methods: {
    processFunctionId(data) {
      for (let item of data) {
        item.functionId = item.id;
        if (!!item.children) {
          this.processFunctionId(item.children);
        }
      }
    },
    loadNode(appId, rootNodeData) {
      functionAPI.queryFunctionList(appId).then(data => {
        // 改为递归遍历
        this.processFunctionId(data);
        let tree = new Three(data, {
          sort: true
        });
        //遍历baseData 根据应用类型
        rootNodeData.children = data;
      });
    },
    createPublicNode() {
      let rootNode = {
        id: "0",
        functionName: "公共功能",
        functionId: "public",
        functionCode: "public",
        functionDesc: this.$t("module.function.topFunction"),
        parentFunctionName: this.$t("module.function.nothing"),
        sort: 0,
        actionUrl: this.$t("module.function.nothing"),
        functionType: "1",
        isRootNode: true,
        children: [] //后天调取的树中的data放在这里
      };
    },
    iconEdit() {
      new this.$pageModal(IconEdit, {}, data => {
        if (!!data) {
          this.newFunctionForm.iconCls = data;
        }
      });
    },
    save() {
      this.$refs["newFunctionForm"].validate(valid => {
        if (valid) {
          this.actions[0].loading = true;
          let data = this.newFunctionForm;
          this.$emit("Close", data);
        }
      });
    },
    cancel() {}
  }
};
</script>

<style lang="less">
.function-manage {
  .noInfoShow {
    display: block;
    text-align: center;
    margin: 5% 0;
  }
  .ivu-form + .noInfoShow {
    display: none;
  }
  .icon-margin-right {
    margin-right: 5px;
  }
  .icon-select {
    width: 20px;
    height: 20px;
    background-size: cover;
    display: inline-block;
    position: absolute;
    font-size: 20px;
    right: 6px;
    top: 7px;
    cursor: pointer;
  }

  .icon-size {
    font-size: 12px;
  }
  .form-block-title {
    display: flex;
    flex-basis: row;
    justify-content: space-between;
    align-items: center;
    .btn-position {
      margin-right: 20px;
    }
  }
}
</style>